<template>
	<div>
		<div>
			<el-form :inline="true" ref="searchForm" :model="searchForm" class="forTbFilter flowStatistics"
				label-position="left" @submit.native.prevent>

				<el-form-item label="IMEI号：">
					<el-input v-model.trim="searchForm.imei" clearable></el-input>
				</el-form-item>

				<el-form-item label="所属客户：">
					<el-select v-model="searchForm.agentId" filterable placeholder="请选择或输入关键字" clearable>
						<el-option v-for="item in agentsOption" :value="item.id" :key="item.id"
							:label="item.name"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="所属链接：">
					<el-select v-model="searchForm.urlId" filterable placeholder="请选择或输入关键字" clearable>
						<el-option v-for="item in urlsOption" :value="item.id" :key="item.id"
							:label="item.name"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="创建时间：" class="dateRange">
					<el-date-picker v-model="searchForm.time" range-separator="至" type="daterange"
						start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>


				<el-form-item class="btnArea">
					<el-button type="primary" @click="getFlowStatisticsHandler" icon="el-icon-search">查 询</el-button>
					<el-button type="primary" @click="uploadExcelVisible=!uploadExcelVisible"
						icon="el-icon-edit">上传imei</el-button>
					<!-- <el-button type="primary" @click="excelSelect()" icon="el-icon-download">导出数据</el-button> -->
				</el-form-item>
			</el-form>
		</div>



		<el-table :data="tbpg.tableData" border height="600">
			<el-table-column type="index" label="序号"></el-table-column>
			<el-table-column prop="urlName" label="链接名称"></el-table-column>
			<el-table-column prop="agentName" label="客户名称"></el-table-column>
			<el-table-column prop="imei" label="imei"></el-table-column>



			<!-- 新增，显示 phone字段 -->
			<el-table-column prop="phone" label="phone"></el-table-column>
			<!-- 新增，显示 phone字段 -->




			<!-- <el-table-column prop="idfa" label="idfa"></el-table-column> -->
			<el-table-column prop="oaid" label="oaid"></el-table-column>
			<!-- <el-table-column prop="oaid_md5" label="oaid_md5"></el-table-column> -->
			<el-table-column prop="campaign_name" label="campaign_name"></el-table-column>
			<el-table-column prop="createTime" label="创建时间"></el-table-column>


			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="set_phone(scope)">号码配置</el-button>
					<!-- <el-button type="text" size="small" @click="btn_change_status(scope.row, 0)">禁用</el-button> -->
				</template>
			</el-table-column>

		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="tbpg.currentPage" :page-sizes="[15, 50, 100, 500]" :page-size="tbpg.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="tbpg.total">
		</el-pagination>


		<!-- Form -->
		<!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->

		<el-dialog title="号码配置" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="imei" :label-width="formLabelWidth">
					<el-input v-model="form.imei" autocomplete="off" disabled></el-input>
				</el-form-item>
				<el-form-item label="phone" :label-width="formLabelWidth">
					<el-input v-model="form.phone" autocomplete="off"></el-input>
					<!-- <el-select v-model="form.region" placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select> -->
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirm_phone">确 定</el-button>
			</div>
		</el-dialog>




		<el-dialog title="提示" :visible.sync="uploadExcelVisible" width="30%" center>

			<el-upload class="upload-demo" drag :action="UploadUrl()" multiple accept=".xlsx" :on-exceed="exceedFile"
				 :http-request="uploadExcelFile">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">只能上传xlsx文件</div>
			</el-upload>

<!-- 			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="uploadExcelFile">确 定</el-button>
			</span> -->
		</el-dialog>


	</div>
</template>
<script>
	import {
		flowStatistics,
		flowEveryDayDetail,
		flowEveryMonthDetail,
		flowStatisticsExport
	} from '@/api/csm.js'

	// 原始的获取抖音info的链接
	// import {getDouyingInfo} from '@/api/fluxPools.js'


	// 根据权限获取抖音info的链接
	import {
		getDouYinPermissionInfo
	} from '@/api/fluxPools.js'


	import {
		setImeiToPhone,
		exceImeiToPhone
	} from '@/api/fieldManage.js'

	import common from '@/utils/common.js'
	var echarts = require('echarts'); // 引入 ECharts 主模块
	export default {
		data() {
			return {
				// batchOptVisible1: false,
				// batchOptForm1: {
				// 	countMonth: ''
				// },
				agentsOption: [],
				urlsOption: [],
				searchForm: {
					agentId: '',
					urlId: '',
					imei: ''

				},
				// pkgGroup: [],
				//每月流量详情表
				tbpg: {
					tableData: [],
					currentPage: 1,
					pageSize: 15,
					total: 0
				},

				//每日流量详情表
				// everyDayTbpg: {
				// 	tableData: [],
				// 	currentPage: 1,
				// 	pageSize: 15,
				// 	total: 0
				// },
				// thisMonth: '',
				// activeName: 'everyMonthTable',
				// everyDayAmountData: [],
				// branchSupplierOption: [],
				// monthFlow: [{
				// 	createTime: '',
				// 	dataAmount: ''
				// }],

				stopMessage: '0',
				moreThanNumber: '0',
				sumTotoalData: '0',
				totalOutData: '0',

				// 号码配置选项
				dialogFormVisible: false,
				// form: {
				// 	name: '',
				// 	region: '',
				// 	date1: '',
				// 	date2: '',
				// 	delivery: false,
				// 	type: [],
				// 	resource: '',
				// 	desc: ''
				// },
				form: {
					imei: '',
					phone: ''
				},
				// 当前操作的 row
				now_row_index: -1,
				formLabelWidth: '120px',

				// excel 上传dialog
				uploadExcelVisible: false,
				limitNum: 1, // 上传excell时，同时允许上传的最大数
				fileList: [], // excel文件列表

			}
		},
		methods: {

			// 号码配置--------------start
			set_phone: function(scope) {
				let that = this;
				var row = scope.row;
				that.now_row_index = scope.$index;
				that.dialogFormVisible = true;
				that.form.imei = row.imei;
				that.form.phone = row.phone;
			},

			confirm_phone: function() {
				let that = this;
				// 如果手机号格式输入不正确
				if (!that.isMobile(that.form.phone)) {
					that.form.phone = "";
					that.$notify.error({
						title: "失败",
						message: "输入手机号格式不正确!"
					});
					that.dialogFormVisible = false;
					return;
				}
				// 如果手机号格式输入正确
				setImeiToPhone(that.form).then(res => {
					if (res.data.code != "200") {
						that.$notify.error({
							title: "失败",
							message: res.data.message
						})
					} else {
						that.$notify.success({
							title: "成功",
							message: "号码编辑成功!"
						})
						that.tbpg.tableData[that.now_row_index].phone = res.data.data.phone;
						that.now_row_index = -1;
					}
					that.dialogFormVisible = false;
				})

			},

			isMobile(mobile) {
				return /^1[3-9]\d{9}$/.test(mobile);
			},
			uploadImeiHandler() {
				// 
				uploadExcelVisible
			},

			UploadUrl() {
				return ""
			},

			exceedFile() {
				this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);
			},
			// 文件上传成功时的钩子
			handleSuccess(res, file, fileList) {
				this.$message.success('文件上传成功');
			},
			// 文件上传失败时的钩子
			handleError(err, file, fileList) {
				this.$message.error('文件上传失败');
			},
			
			// 开始上传文件
			uploadExcelFile(f) {
				let that = this;
				if(f.file==null){
					this.$message("请上传文件");
				}else{
					let form = new FormData();
					form.append('file', f.file);
					exceImeiToPhone(form).then(res=>{
						if(res.data.code==200){
							that.$notify.success(res.data.message);
						}else{
							that.$notify.error(res.data.message);
						}
					});
					that.uploadExcelVisible = false;
				}

			},


			// 号码配置--------------end

			// sureBatchChgStateHandler1() {
			// 	this.$refs.batchOptForm1.validate(valid => {
			// 		if (valid) {
			// 			this.$refs.upload.submit();
			// 		}
			// 	});
			// },
			// handleSuccess(res) {
			// 	if (res.code == 200) {
			// 		this.$message.success(res.message);
			// 	} else {
			// 		this.$message.error(res.message);
			// 	}
			// 	this.cancel();
			// 	this.$refs.upload.clearFiles();
			// },


			// cancel() {
			// 	this.batchOptVisible1 = false;
			// 	this.$refs.batchOptForm1.resetFields();
			// },
			// excelSelect($event) {
			// 	common.resetCurrentPage(this, $event, 'tbpg');
			// 	var data = common.getRequestParams(this, 'tbpg', this.searchForm);
			// 	data.token = localStorage.getItem('token');
			// 	common.sysRequest('excels/all/urlInfos', data, 'post').then(res => {
			// 		if (res.data.code == 200) {
			// 			this.$message.success('下载中，请稍后在下载管理中查询');
			// 		} else {
			// 			this.$message.error(res.data.message);
			// 		}
			// 	})
			// },

			getFlowStatisticsHandler($event) {
				common.resetCurrentPage(this, $event, 'tbpg');
				var data = common.getRequestParams(this, 'tbpg', this.searchForm);

				// 原始获得抖音数据的连接
				//  getDouyingInfo(data).then(res => {
				//     common.listCallback(this, res, 'tbpg');
				// })

				// wzyk新增
				getDouYinPermissionInfo(data).then(res => {
					common.listCallback(this, res, 'tbpg')
				})
				// wzyk新增

			},

			formatDataAmount() {
				this.searchForm.dataAmount = this.searchForm.dataAmount.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
			},

			//获取每日流量数据
			// getFlowEveryDayHandler($event) {
			// 	common.resetCurrentPage(this, $event, 'tbpg');
			// 	var data = common.getRequestParams(this, 'tbpg', this.searchForm);
			// 	if (data.dataAmount) {
			// 		data.dataAmount = data.dataAmount * 1024;
			// 	}
			// 	data.iccid = this.currentIccic;
			// 	flowEveryDayDetail(data).then(res => {
			// 		common.listCallback(this, res, 'everyDayTbpg');
			// 		this.activeName = 'everyDayTable';
			// 	})
			// },

			goToDetailPage(row) {
				this.$store.commit('menu/setFromPage', 'orderMgt');
				this.$store.commit('menu/setFromPageIccid', row.iccid);
				document.getElementById('cardDetailsMenu').click();
			},

			exportInfoHandle() { //导出excel文件
				this.$confirm("确定要导出吗？", "提示", {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					let param = this.searchForm;
					flowStatisticsExport(param).then(res => {
						if (res.data.code == 200) {
							this.$message.success('数据导出中,请稍候去任务中心下载');
						} else {
							this.$message.error(res.data.msg);
						}
					}).catch(err => console.error(err));
				}).catch(() => {});
			},


			// drawFlowStatisticsChart(elementId, everyDayAmountData) {
			// 	let dataAxis = [];
			// 	let data = [];
			// 	let yMax = 500;
			// 	let dataShadow = [];
			// 	let myChart = echarts.init(document.getElementById(elementId));



			// 	for (let i = 0; i < everyDayAmountData.length; i++) {
			// 		dataAxis.push(everyDayAmountData[i].createTime);
			// 		data.push(everyDayAmountData[i].dataAmount);
			// 	}

			// 	yMax = Math.max(...data);

			// 	for (let i = 0; i < data.length; i++) {
			// 		dataShadow.push(yMax);
			// 	}


			// 	let option = {
			// 		title: {
			// 			text: '每日流量统计',
			// 		},
			// 		xAxis: {
			// 			data: dataAxis,
			// 			axisTick: {
			// 				show: false
			// 			},
			// 			axisLine: {
			// 				show: false
			// 			},
			// 			z: 10
			// 		},
			// 		yAxis: {
			// 			axisLine: {
			// 				show: false
			// 			},
			// 			axisTick: {
			// 				show: false
			// 			},
			// 			axisLabel: {
			// 				textStyle: {
			// 					color: '#999'
			// 				}
			// 			}
			// 		},
			// 		dataZoom: [{
			// 			type: 'inside'
			// 		}],
			// 		series: [{ // For shadow
			// 				type: 'bar',
			// 				itemStyle: {
			// 					normal: {
			// 						color: 'rgba(0,0,0,0.05)'
			// 					}
			// 				},
			// 				barGap: '-100%',
			// 				barCategoryGap: '40%',
			// 				data: dataShadow,
			// 				animation: false,
			// 			},
			// 			{
			// 				type: 'bar',
			// 				label: {
			// 					normal: {
			// 						show: true,
			// 						position: 'insideTop'
			// 					}
			// 				},
			// 				itemStyle: {
			// 					normal: {
			// 						color: new echarts.graphic.LinearGradient(
			// 							0, 0, 0, 1,
			// 							[{
			// 									offset: 0,
			// 									color: '#83bff6'
			// 								},
			// 								{
			// 									offset: 0.5,
			// 									color: '#188df0'
			// 								},
			// 								{
			// 									offset: 1,
			// 									color: '#188df0'
			// 								}
			// 							]
			// 						)
			// 					},
			// 					emphasis: {
			// 						color: new echarts.graphic.LinearGradient(
			// 							0, 0, 0, 1,
			// 							[{
			// 									offset: 0,
			// 									color: '#2378f7'
			// 								},
			// 								{
			// 									offset: 0.7,
			// 									color: '#2378f7'
			// 								},
			// 								{
			// 									offset: 1,
			// 									color: '#83bff6'
			// 								}
			// 							]
			// 						)
			// 					}
			// 				},
			// 				data: data
			// 			}
			// 		]
			// 	};

			// 	myChart.setOption(option);
			// },

			handleSizeChange(val) {
				this.tbpg.pageSize = val;
				this.getFlowStatisticsHandler();
			},
			handleCurrentChange(val) {
				this.tbpg.currentPage = val
				this.getFlowStatisticsHandler();
			},
		},
		created() {},

		mounted() {
			this.getFlowStatisticsHandler();
			common.getNextAgentOptsCom(this, 'agentsOption');
			// 原始获取抖音连接操作
			// common.sysRequest('tiktok/list/all', {}, 'post').then(res => {
			//      if(res.data.code == 200){
			//         this.urlsOption=res.data.data;
			//      }
			//  })


			//wzyk 新增
			common.sysRequest('tiktok/list/permissionInfo', {}, 'post').then(res => {
				if (res.data.code == 200) {
					this.urlsOption = res.data.data;
				}
			})
		},

		updated: function() {

		},

		watch: {

		}
	}
</script>

<style>
	.flowStatistics .el-input-group__prepend,
	.flowStatistics .el-input-group__append {
		background-color: #f5f5f5;
	}

	.flowStatistics .el-form-item__content {
		width: 250px;
	}
</style>

<style lang="less" scoped>
	.forTbFilter {
		display: inline-block;

		.btnArea {
			display: inline-block;
			margin-left: 30px;

		}
	}

	.stopMessage {
		font-size: 18px;
		margin: 0 0 10px 0;

		span {
			color: #ea2929;
			margin-right: 60px;

		}
	}
</style>